﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8"/>
    <style>
        ul{
            list-style-type:none;
        }
        ul>li{
            float:left;
        }
        #dialog{
            display:none;
            position:absolute;
            background-color:#808080;
        }
    </style>
    <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script>
    <script>
        $(function () {
            $('.box>img').click(function () {


                $("#dislog>img").attr("src", this.src);
                $("#dislog").show(1000);
            });
            $("close").click(function () {
                $("#dislog").hide(1000);
            });
        });

    </script>
</head>
<body>
    <h2>标签选择器,id选择器,通过css方法添加样式,show(),hide练习题</h2>
    <div id="mask">
        <div id="dialog" style="">
            <div id="close">关闭</div>
            <img src="" width="600" height="450">
        </div>
    </div>

    <div id="container">
        <ul>
            <li class="box">
                <img src="images/rat.jpg" width="150" height="150" />
            </li>
            <li class="box">
                <img src="images/mm.jpg" width="150" height="150" />
            </li>
            <li class="box">
                <img src="images/dragon.png" width="150" height="150" />
            </li>
        </ul>
    </div>
</body>
</html>
